<template>
  <view class="w-full bg-white">
    <view class="container-wd">
      <image class="product-image" :src="useImage(props.imgs[0] as string)" mode="aspectFill" />
      <view class="product-info">
        <view class="product-title">{{ props.info?.typeName }}</view>
        <view class="product-details">
          <text>编号：{{ props.info?.productCode }}</text>

          <text>型号：{{ props.info?.model }}</text>
          <text>含量：{{ props.info?.packagingUnit }}</text>

          <text>材质：{{ props.info?.material }}</text>

          <text>单位：{{ props.info?.unit }}</text>

          <text>外观包装：{{ props.info?.externalPack }}</text>
        </view>
        <view class="product-expiry">
          <text>有效期：{{ props.info?.expiryDate }} </text>
          <text class="warning-text">近效期</text>
        </view>
        <view class="product-price">
          <!-- <text class="original-price text-red-500">¥{{ props.info?.price || 0 }}</text> -->
          <text class="original-price text-red-500">¥{{ medicationStore?.sku?.cur?.price || 0 }}</text>
          <text class="original-price line-through">¥{{ props.info?.sellingPrice || 0 }}</text>
          <text> 折扣原因：512活动</text>
        </view>
      </view>
    </view>
    <view class="product-numbers">
      <text>销售数量：1000</text>

      <text>库存：{{ props.info?.num }}</text>

      <text>产地：{{ getOriginPlaceText(props.info?.originPlace) }}</text>

      <text>厂家：{{ props.info?.manufacturer }}</text>
      <!-- <text>生产许可证编号：{{props.info?.productionLicense}} </text> -->

      <text>质量层次：{{ props.info?.qualityLevel }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useImage } from '@/hooks';
import { getDict } from '@/service/api/dict';
import { useMedicationStore } from '@/store/modules/medication';
const medicationStore = useMedicationStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  imgs: {
    type: Array as () => string[],
    default: () => []
  }
});

// 数据字典数据
const citizenDict = ref<Array<{ itemText: string; itemValue: string | number }>>([]);

// 获取产地文本显示
const getOriginPlaceText = (value: string | number | undefined) => {
  if (!value) return '';
  const dictItem = citizenDict.value.find((item) => item.itemValue === value);
  return dictItem ? dictItem.itemText : value;
};

// 加载数据字典
const loadCitizenDict = async () => {
  try {
    const res = await getDict('citizen');
    if (res && Array.isArray(res)) {
      citizenDict.value = res;
      // 产地数据字典加载成功
    }
  } catch (error) {
    // 加载产地数据字典失败
  }
};

onMounted(() => {
  loadCitizenDict();
});
</script>

<style lang="scss">
.container-wd {
  width: 750rpx;
  margin: 0 auto;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  box-sizing: border-box;

  .product-image {
    width: 200rpx;
    height: 200rpx;
    background-color: #ccc;
    margin-right: 20rpx;
  }

  .product-info {
    overflow: hidden;
    flex: 1;
  }

  .product-title {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .product-details {
    margin-bottom: 10rpx;
    font-size: 18rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx 32rpx;
    line-height: 1.2;
  }

  .product-price {
    font-size: 18rpx;
    margin-top: 12rpx;
  }

  .product-price .original-price {
    // text-decoration: line-through;
    margin-right: 5rpx;
  }

  .product-expiry {
    font-size: 18rpx;
  }
  .warning-text {
    color: red;
    font-size: 18rpx;
    transform: translateY(-10rpx);
  }
}

.product-numbers {
  width: 750rpx;
  padding: 20rpx;
  font-size: 18rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx 48rpx;
  line-height: 1.2;
}
</style>
